<template>
  <div class="dashboard-container">
    <div class="sidebar">
      <div class="logo">
        <div class="logo-icon">
          <XIcon :icon="VtjIconDocument" size="24" color="#FFFFFF"></XIcon>
        </div>
        <span class="logo-text"> Motiv.</span>
      </div>
      <div class="nav-menu">
        <div class="nav-item active">
          <XIcon :icon="Grid" size="20" color="#5E6366"></XIcon>
          <span> Dashboard</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="PieChart" size="20" color="#72767C"></XIcon>
          <span> Assets</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="Van" size="20" color="#72767C"></XIcon>
          <span> Booking</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="ShoppingBag" size="20" color="#72767C"></XIcon>
          <span> Sell Cars</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="ShoppingCart" size="20" color="#72767C"></XIcon>
          <span> Buy Cars</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="Service" size="20" color="#72767C"></XIcon>
          <span> Services</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="Calendar" size="20" color="#72767C"></XIcon>
          <span> Calender</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="ChatRound" size="20" color="#72767C"></XIcon>
          <span> Messages</span>
        </div>
      </div>
      <div class="bottom-menu">
        <div class="nav-item">
          <XIcon :icon="Setting" size="20" color="#72767C"></XIcon>
          <span> Settings</span>
        </div>
        <div class="nav-item">
          <XIcon :icon="SwitchButton" size="20" color="#72767C"></XIcon>
          <span> Log out</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="top-nav">
        <div class="search-bar">
          <XIcon :icon="Search" size="20" color="#7C7C8D"></XIcon>
          <input
            v-model="state.searchText"
            type="text"
            placeholder="Search or type" />
        </div>
        <div class="right-area">
          <div class="notification">
            <XIcon :icon="Bell" size="20" color="#7C7C8D"></XIcon>
            <div class="notification-badge"></div>
          </div>
          <div class="user-avatar">
            <img alt="User Avatar" src="https://picsum.photos/48/48?random=1" />
          </div>
        </div>
      </div>
      <div class="cards-container">
        <div class="card energy">
          <div class="card-icon">
            <div class="icon-bg">
              <XIcon :icon="Lightning" size="20" color="#FFFFFF"></XIcon>
            </div>
          </div>
          <h3>Energy</h3>
          <div class="chart-container">
            <XChart
              width="100%"
              height="120px"
              :option="state.energyChartOption"></XChart>
          </div>
        </div>
        <div class="card">
          <div class="card-icon">
            <div class="icon-bg range">
              <XIcon :icon="User" size="20" color="#FF7E86"></XIcon>
            </div>
          </div>
          <h3>Range</h3>
          <div class="chart-container">
            <XChart
              width="100%"
              height="120px"
              :option="state.rangeChartOption"></XChart>
          </div>
        </div>
        <div class="card">
          <div class="card-icon">
            <div class="icon-bg break-fluid">
              <XIcon :icon="Watermelon" size="20" color="#A162F7"></XIcon>
            </div>
          </div>
          <h3>Break fluid</h3>
          <div class="chart-container">
            <XChart
              width="100%"
              height="120px"
              :option="state.breakFluidChartOption"></XChart>
          </div>
        </div>
        <div class="card">
          <div class="card-icon">
            <div class="icon-bg tire-wear">
              <XIcon :icon="User" size="20" color="#F6CC17"></XIcon>
            </div>
          </div>
          <h3>Tire Wear</h3>
          <div class="chart-container">
            <XChart
              width="100%"
              height="120px"
              :option="state.tireWearChartOption"></XChart>
          </div>
        </div>
      </div>
      <div class="charts-container">
        <div class="chart-card">
          <div class="chart-header">
            <h3>Miles Statistics</h3>
            <div class="date-selector">
              <button class="active">Day</button>
              <button>Week</button>
              <button>Month</button>
            </div>
          </div>
          <p class="miles-count">256 Miles</p>
          <div class="chart-wrapper">
            <XChart
              width="100%"
              height="250px"
              :option="state.milesChartOption"></XChart>
          </div>
        </div>
        <div class="chart-card">
          <div class="chart-header">
            <h3>Car Statistics</h3>
            <div class="date-selector">
              <span> 20 February 2022</span>
              <div class="button-group">
                <button class="active">Day</button>
                <button>Week</button>
                <button>Month</button>
              </div>
            </div>
          </div>
          <div class="chart-wrapper">
            <XChart
              width="100%"
              height="250px"
              :option="state.carChartOption"></XChart>
          </div>
        </div>
      </div>
      <div class="bottom-cards">
        <div class="car-card cooper">
          <div class="card-top">
            <div class="recommend">64% Recommend</div>
            <img
              alt="Mini Cooper"
              src="https://picsum.photos/200/100?random=2" />
          </div>
          <h4>Mini Cooper</h4>
          <div class="car-info">
            <span>
              <XIcon :icon="Odometer" size="16" color="#72767C"></XIcon>
              <span> 132K</span></span
            >
            <XIcon :icon="Lightning" size="16" color="#72767C"></XIcon>
            <XIcon :icon="User" size="16" color="#72767C"></XIcon>
            <span> $32/h</span>
          </div>
        </div>
        <div class="car-card porsche">
          <div class="card-top">
            <div class="recommend">74% Recommend</div>
            <img
              alt="Porsche 911 Carrera"
              src="https://picsum.photos/200/100?random=3" />
          </div>
          <h4>Porsche 911 Carrera</h4>
          <div class="car-info">
            <span>
              <XIcon :icon="Odometer" size="16" color="#72767C"></XIcon>
              <span> 130K</span></span
            >
            <XIcon :icon="Lightning" size="16" color="#72767C"></XIcon>
            <XIcon :icon="User" size="16" color="#72767C"></XIcon>
            <span> $28/h</span>
          </div>
        </div>
        <div class="car-card countryman">
          <div class="card-top">
            <div class="recommend">74% Recommend</div>
            <img
              alt="Mini Countryman"
              src="https://picsum.photos/200/100?random=4" />
          </div>
          <h4>Porsche 911 Carrera</h4>
          <div class="car-info">
            <span>
              <XIcon :icon="Odometer" size="16" color="#72767C"></XIcon>
              <span> 130K</span></span
            >
            <XIcon :icon="Lightning" size="16" color="#72767C"></XIcon>
            <XIcon :icon="User" size="16" color="#72767C"></XIcon>
            <span> $28/h</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import { XIcon } from '@vtj/ui';
  import { XChart } from '@vtj/charts';
  import {
    VtjIconDocument,
    Grid,
    PieChart,
    Van,
    ShoppingBag,
    ShoppingCart,
    Service,
    Calendar,
    ChatRound,
    Setting,
    SwitchButton,
    Search,
    Bell,
    Lightning,
    User,
    Watermelon,
    Odometer
  } from '@vtj/icons';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Json2Code',
    components: { XIcon, XChart },
    setup(props) {
      const provider = useProvider({ id: 'k7ud89fv', version: '1752735994117' });
      const state = reactive({
        searchText: '',
        carChartOption: {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
              '7 am',
              '9 am',
              '11 am',
              '1 pm',
              '3 pm',
              '5 pm',
              '7 pm',
              '9 pm'
            ],
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: '#808191' },
            splitLine: { lineStyle: { color: '#F9F9F9' } }
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { color: '#F9F9F9' } },
            axisLabel: { show: false }
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320, 820],
              type: 'line',
              smooth: true,
              lineStyle: { width: 4, color: '#FF774F' },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgba(255, 118, 76, 0.24)' },
                    { offset: 1, color: 'rgba(255, 126, 7, 0)' }
                  ]
                }
              },
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#FF774F',
                borderColor: '#FFFFFF',
                borderWidth: 2
              }
            }
          ]
        },
        milesChartOption: {
          xAxis: {
            type: 'category',
            data: ['1 PM', '2 PM', '3 PM', '4 PM', '5 PM', '6 PM', '7 PM'],
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: '#808191' }
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { color: '#F2F2F2' } },
            axisLabel: { show: false }
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              barWidth: '30%',
              itemStyle: { color: '#2884FF', borderRadius: [4, 4, 0, 0] },
              backgroundStyle: { color: '#F3F5F8', borderRadius: [4, 4, 0, 0] },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
          tooltip: {
            trigger: 'item',
            backgroundColor: '#282B33',
            borderColor: 'transparent',
            borderRadius: 5,
            textStyle: { color: '#FFFFFF' },
            formatter: function (params) {
              return `<div style='display:flex;align-items:center;'>
                  <div style='width:8px;height:8px;background:#2884FF;border-radius:50%;margin-right:8px;'></div>
                  <div>
                    <div style='font-weight:bold;font-size:10px;'>${params.name}</div>
                    <div style='font-weight:bold;font-size:10px;'>157k</div>
                  </div>
                </div>`;
            }
          }
        },
        rangeChartOption: {
          series: [
            {
              type: 'pie',
              radius: ['70%', '90%'],
              avoidLabelOverlap: false,
              itemStyle: { color: '#F3F5F8' },
              label: {
                show: true,
                position: 'center',
                formatter: '157k%',
                fontSize: 24,
                fontWeight: 'bold',
                color: '#242731'
              },
              data: [
                { value: 157, itemStyle: { color: '#FF7E86' } },
                { value: 43, itemStyle: { color: '#F3F5F8' } }
              ]
            }
          ]
        },
        energyChartOption: {
          series: [
            {
              type: 'pie',
              radius: ['70%', '90%'],
              avoidLabelOverlap: false,
              itemStyle: { color: '#B37EFC' },
              label: {
                show: true,
                position: 'center',
                formatter: '45%',
                fontSize: 24,
                fontWeight: 'bold',
                color: '#FFFFFF'
              },
              data: [
                { value: 45, itemStyle: { color: '#B37EFC' } },
                { value: 55, itemStyle: { color: 'transparent' } }
              ]
            }
          ]
        },
        tireWearChartOption: {
          series: [
            {
              type: 'pie',
              radius: ['70%', '90%'],
              avoidLabelOverlap: false,
              itemStyle: { color: '#F3F5F8' },
              label: {
                show: true,
                position: 'center',
                formatter: '25%',
                fontSize: 24,
                fontWeight: 'bold',
                color: '#242731'
              },
              data: [
                { value: 25, itemStyle: { color: '#F6CC17' } },
                { value: 75, itemStyle: { color: '#F3F5F8' } }
              ]
            }
          ]
        },
        breakFluidChartOption: {
          series: [
            {
              type: 'pie',
              radius: ['70%', '90%'],
              avoidLabelOverlap: false,
              itemStyle: { color: '#F3F5F8' },
              label: {
                show: true,
                position: 'center',
                formatter: '9%',
                fontSize: 24,
                fontWeight: 'bold',
                color: '#242731'
              },
              data: [
                { value: 9, itemStyle: { color: '#A162F7' } },
                { value: 91, itemStyle: { color: '#F3F5F8' } }
              ]
            }
          ]
        }
      });
      return {
        state,
        props,
        provider,
        VtjIconDocument,
        Grid,
        PieChart,
        Van,
        ShoppingBag,
        ShoppingCart,
        Service,
        Calendar,
        ChatRound,
        Setting,
        SwitchButton,
        Search,
        Bell,
        Lightning,
        User,
        Watermelon,
        Odometer
      };
    }
  })
</script>
<style lang="scss" scoped>
  .dashboard-container {
    display: flex;
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: 'DM Sans', sans-serif;
  }
  .sidebar {
    width: 248px;
    background-color: #ffffff;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
  }
  .sidebar .logo {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
  }
  .sidebar .logo .logo-icon {
    width: 40px;
    height: 40px;
    background-color: #a162f7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }
  .sidebar .logo .logo-text {
    font-weight: 700;
    font-size: 24px;
    color: #1f2128;
  }
  .sidebar .nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sidebar .bottom-menu {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
  }
  .sidebar .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
  }
  .sidebar .nav-item:hover {
    background-color: #f3f5f8;
  }
  .sidebar .nav-item.active {
    background-color: #f3f5f8;
  }
  .sidebar .nav-item.active span {
    color: #1f2128;
  }
  .sidebar .nav-item span {
    margin-left: 12px;
    font-weight: 500;
    font-size: 14px;
    color: #5e6366;
  }
  .main-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
  }
  .top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-radius: 14px;
    padding: 15px 25px;
    margin-bottom: 30px;
  }
  .top-nav .search-bar {
    display: flex;
    align-items: center;
    background-color: #f5f4f6;
    border-radius: 8px;
    padding: 12px 16px;
    width: 400px;
  }
  .top-nav .search-bar input {
    border: none;
    background: transparent;
    margin-left: 12px;
    font-weight: 500;
    font-size: 16px;
    color: #7c7c8d;
    width: 100%;
  }
  .top-nav .search-bar input:focus {
    outline: none;
  }
  .top-nav .search-bar input::placeholder {
    color: #7c7c8d;
  }
  .top-nav .right-area {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  .top-nav .right-area .notification {
    position: relative;
    cursor: pointer;
  }
  .top-nav .right-area .notification .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #ff5d6f;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
  }
  .top-nav .right-area .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
  }
  .top-nav .right-area .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
  }
  .cards-container .card {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  .cards-container .card.energy {
    background-color: #a162f7;
  }
  .cards-container .card.energy h3 {
    color: #ffffff;
  }
  .cards-container .card .card-icon {
    margin-bottom: 20px;
  }
  .cards-container .card .card-icon .icon-bg {
    width: 40px;
    height: 40px;
    background-color: #a66fee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cards-container .card .card-icon .icon-bg.range {
    background-color: rgba(255, 126, 134, 0.1);
  }
  .cards-container .card .card-icon .icon-bg.break-fluid {
    background-color: rgba(161, 98, 247, 0.1);
  }
  .cards-container .card .card-icon .icon-bg.tire-wear {
    background-color: rgba(246, 204, 23, 0.1);
  }
  .cards-container .card h3 {
    font-weight: 700;
    font-size: 24px;
    color: #242731;
    margin-bottom: 20px;
  }
  .cards-container .card .chart-container {
    height: 120px;
  }
  .charts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
  }
  .charts-container .chart-card {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  .charts-container .chart-card .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .charts-container .chart-card .chart-header h3 {
    font-weight: 700;
    font-size: 20px;
    color: #242731;
  }
  .charts-container .chart-card .chart-header .date-selector {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .charts-container .chart-card .chart-header .date-selector span {
    font-weight: 700;
    font-size: 14px;
    color: #5e6366;
  }
  .charts-container .chart-card .chart-header .date-selector .button-group {
    display: flex;
    gap: 5px;
    background-color: #f5f4f6;
    border-radius: 10px;
    padding: 5px;
  }
  .charts-container .chart-card .chart-header button {
    border: none;
    padding: 6px 12px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s;
  }
  .charts-container .chart-card .chart-header button.active {
    background-color: #2884ff;
    color: #ffffff;
  }
  .charts-container .chart-card .chart-header button:not(.active) {
    background-color: transparent;
    color: #5e6366;
  }
  .charts-container .chart-card .miles-count {
    font-weight: 700;
    font-size: 14px;
    color: #5e6366;
    margin-bottom: 20px;
  }
  .charts-container .chart-card .chart-wrapper {
    height: 250px;
  }
  .bottom-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .bottom-cards .car-card {
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  .bottom-cards .car-card.cooper {
    background-color: #e1dfb4;
  }
  .bottom-cards .car-card.porsche {
    background-color: #e3ecf1;
  }
  .bottom-cards .car-card.countryman {
    background-color: #f4e3e5;
  }
  .bottom-cards .car-card .card-top {
    position: relative;
    margin-bottom: 15px;
  }
  .bottom-cards .car-card .card-top .recommend {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #242731;
  }
  .bottom-cards .car-card .card-top img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
  }
  .bottom-cards .car-card h4 {
    font-weight: 700;
    font-size: 20px;
    color: #1f2128;
    margin-bottom: 15px;
  }
  .bottom-cards .car-card .car-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bottom-cards .car-card .car-info span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    font-size: 14px;
    color: #72767c;
  }
  /* 响应式布局 */
  @media (max-width: 1200px) {
    .cards-container {
      grid-template-columns: repeat(2, 1fr);
    }
    .charts-container {
      grid-template-columns: 1fr;
    }
    .bottom-cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 768px) {
    .dashboard-container {
      flex-direction: column;
    }
    .sidebar {
      width: 100%;
      height: auto;
      padding: 15px;
      position: relative;
    }
    .sidebar .logo {
      margin-bottom: 20px;
    }
    .sidebar .nav-menu {
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .sidebar .bottom-menu {
      flex-direction: row;
      margin-bottom: 0;
    }
    .sidebar .nav-item {
      padding: 8px 12px;
    }
    .sidebar .nav-item span {
      display: none;
    }
    .main-content {
      padding: 15px;
    }
    .top-nav {
      flex-direction: column;
      gap: 15px;
      padding: 15px;
    }
    .top-nav .search-bar {
      width: 100%;
    }
    .cards-container {
      grid-template-columns: 1fr;
    }
    .bottom-cards {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    .sidebar .nav-item {
      padding: 6px 8px;
    }
    .chart-card .chart-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }
</style>
